<template>
    <div class="trainingCentreHandle">
        <el-breadcrumb separator="/" class="bread-title">
            <el-breadcrumb-item :to="{ path: '/trainingCentre' }">培训中心</el-breadcrumb-item>
            <el-breadcrumb-item>{{typeText[type]}}</el-breadcrumb-item>
        </el-breadcrumb>
        <el-form :model="form" ref="form" label-width="140px" class="demo-ruleForm">
            <el-form-item label="新增类型：" prop="type">
                <el-radio-group v-model="form.type" :disabled="type==='view'">
                    <el-radio label="3">业务培训</el-radio>
                    <el-radio label="4">产品培训</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="标题：" prop="title">
                <el-input class="w300 mr20" :disabled="type==='view'" size="small" v-model="form.title" placeholder="请输入内容"></el-input>
                <el-tooltip class="item" effect="dark" content="少于25个字" placement="right">
                    <i class="el-icon-info"></i>
                </el-tooltip>
            </el-form-item>
            <!--<el-form-item label="图片：" prop="addType">-->
            <!--<upload ref="upload" :limit="1" accept=".jpg,.jpeg,.png,.bmp,.gif"/>-->
            <!--</el-form-item>-->
            <el-form-item label="内容：" prop="addType">
                <ckeditor :disabled="type==='view'" v-model="form.text"></ckeditor>
            </el-form-item>
        </el-form>
        <div class="tac" v-if="type!=='view'">
            <el-button type="primary" @click="save">保存</el-button>
            <el-button @click="returnList">取消</el-button>
        </div>
    </div>
</template>

<script type="text/ecmascript-6">

    // import upload from "@/components/common/Upload"
    import ckeditor from '@/components/common/ckeditor'

    export default {
        name: 'trainingCentreHandle',
        sourceName: 'trainingCentre',

        data() {
            return {
                type: '',
                typeText: {
                    new: '新增',
                    edit: '编辑',
                    view: '查看'
                },
                form: {
                    logoUrl: "",
                    text: "",
                    title: "",
                    type: '3'
                }
            }
        },
        created() {
            this.type = this.$route.query.type;
            let id = this.$route.query.id
            if (this.type !== 'new' && id) {
                this.getSingleData(id)
            }
        },
        mounted() {

        },
        methods: {
            getSingleData(id) {
                this.$axios.post("/cms/news/find", {
                    id
                }).then((res) => {
                    console.log(res);
                    this.form = {
                        logoUrl: res.logoUrl,
                        text: res.text,
                        title: res.title,
                        type: res.type
                    }
                })
            },
            returnList() {
                this.$router.push({path: "./trainingCentre"})
            },
            save() {
                if (!this.form.title.length) {
                    this.$message.warning("请输入标题！")
                    return false;
                }
                if (!this.form.text.length) {
                    this.$message.warning("请输入内容！")
                    return false;
                }

                if (this.type === 'new') {
                    this.$axios.post("/cms/news/add", this.form).then((res) => {
                        this.$message.success(this.typeText[this.type] + "成功！")
                        this.returnList()
                    })
                } else {
                    this.$axios.post("/cms/news/update", {
                        id: this.$route.query.id,
                        ...this.form
                    }).then((res) => {
                        this.$message.success(this.typeText[this.type] + "成功！")
                        this.returnList()
                    })
                }
            }
        },
        components: {
            // upload,
            ckeditor
        },
        computed: {}
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" scoped>

</style>
<style lang="stylus">

</style>
